<template>
  <div>
    <div style="background:#eee;padding: 10px"
         class="pic_card"
         v-for="(card,index) in cardDatas"
         :key="index">
      <Card :bordered="false">
        <p slot="title">广告</p>
        <Poptip word-wrap
                width="200"
                :content="card.info">
          <Button>广告简介</Button>
        </Poptip>
        <div>
          <img :src="card.url"
               alt="广告丢失"
               class="card_img">
        </div>
        <div><button @click="remove(index)">删除</button></div>
      </Card>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      cardDatas: [
        
      ]
    };
  },
  methods: {
    remove(index) {
      this.$Modal.confirm({
        title: "是否删除所选内容",
        content: "<p>点击确定进行删除,将删除对应广告的所有数据</p>",
        onOk: () => {
          this.handleDelete(index);
        },
        onCancel: () => {
          this.$Message.info("删除已取消");
        }
      });
    },
    handleDelete(index){
      let url = "/addelete";
      this.$axios
        .post(
          url,
          {
            "id": this.cardDatas[index].id
          },
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(response => {
          this.cardDatas.splice(index, 1);
          this.$Message.info("删除成功");
        })
        .catch(error => {
          console.log(error);
          this.$Message.error("服务器繁忙");
        });
    },
    getImageList() {
      let url = "/ADList";
      axios({
        method: "post",
        url: url,
        headers: {
          "Content-type": "application/x-www-form-urlencoded"
        }
      })
        .then(response => {
          this.cardDatas = response.data.list;
        })
        .catch(error => {
          console.log(error);
        });
    }
  },
  mounted() {
    this.getImageList()
  }
};
</script>



<style scoped>
.pic_card {
  width: 284px;
  height: 400px;
  float: left;
  overflow: hidden;
}
.card_img {
  width: 200px;
  height: 200px;
  margin: 2px;
}
.card_info {
  word-break: normal;
  white-space: pre-warp;
  word-wrapl: break-word;
}
</style>


